<template>
  <div>
    <div class="demo-image__placeholder">
      <div class="block">
        <el-image :src="src" style="width: 910px;height: 100px;"></el-image>
      </div>
      <el-table ref="filterTable" :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column label="头像" width="120">
          <template slot-scope="scope">
            <img :src="imgSrc" style="width: 50px;height: 50px;" />
          </template>
        </el-table-column>
        <el-table-column prop="account" label="账号名称" width="120">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="80">
        </el-table-column>
        <el-table-column prop="phone" label="联系方式" width="140">
        </el-table-column>
        <el-table-column prop="area" label="责任区域" width="140">
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="180">
        </el-table-column>
        <el-table-column label="操作">
          <template slot="header">
            <strong>操作</strong>
            <el-button size="mini" type="success" style="margin-left:30px" @click="initAdd()">增加</el-button>
          </template>
          <template slot-scope="scope">
            <el-button size="mini" type="primary " @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deleted(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-dialog title="增加账单配置" :visible.sync="dialogAddFormVisible">
        <el-form :model="propertyStaff">
          <el-form-item label="头像" :label-width="formLabelWidth">
            <el-upload class="upload-demo" action="http://127.0.0.1:8080/api/v1/config/propertyStaff/upload/propertyStaffPhoto" :on-preview="handlePreview" :on-remove="handleRemove"
              :before-remove="beforeRemove" :auto-upload="false" :headers="jwt" :on-progress="onProgress"  multiple :limit="1" :on-exceed="handleExceed"
              ref="upload" :file-list="fileList">
              <el-button size="small" type="primary">头像上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="账号名称" :label-width="formLabelWidth">
            <el-input v-model="propertyStaff.account" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input v-model="propertyStaff.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="propertyStaff.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="联系方式" :label-width="formLabelWidth">
            <el-input v-model="propertyStaff.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="责任区域" :label-width="formLabelWidth">
            <div class="block">
              <span class="demonstration"></span>
              <el-cascader v-model="areas.id" :options="areas" ref="dropDownVisible" :props="defaultProps"
                @change="handleChange"></el-cascader>
            </div>
          </el-form-item>
          <el-form-item label="角色选择" :label-width="formLabelWidth">
            <el-select v-model="propertyStaff.role.id" placeholder="请选择角色">
              <el-option v-for="role in roles" :key="role.id" :label="role.name" :value="role.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogAddFormVisible = false">取 消</el-button>
          <el-button type="primary" :plain="true" @click="add()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div>
      <el-dialog title="修改账单配置" :visible.sync="dialogFormVisible">
        <el-form :model="propertyStaff">
          <el-form-item label="头像修改" :label-width="formLabelWidth">
            <el-upload class="upload-demo" action="" :on-preview="handlePreview" :on-remove="handleRemove"
              :before-remove="beforeRemove" multiple :before-upload="beforeUpload" :limit="1" :on-exceed="handleExceed" ref="upload"
              :auto-upload="false" :file-list="fileList">
              <el-button size="small" type="primary">头像上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="账号名称" :label-width="formLabelWidth">
            <el-input v-model="propertyStaff.account" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input v-model="propertyStaff.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="propertyStaff.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="联系方式" :label-width="formLabelWidth">
            <el-input v-model="propertyStaff.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="责任区域" :label-width="formLabelWidth">
            <div class="block">
              <span class="demonstration"></span>
              <el-cascader v-model="areas.id" :options="areas" ref="dropDownVisible" :props="defaultProps"
                @change="handleChange"></el-cascader>
            </div>
          </el-form-item>
          <el-form-item label="角色选择" :label-width="formLabelWidth">
            <el-select v-model="propertyStaff.role.id" placeholder="请选择角色">
              <el-option v-for="role in roles" :key="role.id" :label="role.name" :value="role.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" :plain="true" @click="updatedConfig()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  name: "PropertyStaff",
  data() {
    return {
      page: 1,
      pageSize:6,
      value: '',
      imgSrc: [],
      tableData: [],
      jwt:{
        jwt:window.localStorage.getItem('jwt')
      },
      loading: true,
      uploadFile:"",
      roles: [],
      areas: [],
      boolean: "false",
      defaultProps: {
        children: "sonPlace",
        label: "name",
        value: "id",
        checkStrictly: true,
      },
      dialogFormVisible: false,
      dialogAddFormVisible: false,
      value: "",
      formLabelWidth: '120px',
      src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fahjhwy.com%2Fupload_picture%2F201408121726430.jpg&refer=http%3A%2F%2Fahjhwy.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664962497&t=8745853c048cacb759ba02132ae0cb6b',
      fileList: [],
      areaIds: {
        id: ""
      },
      propertyStaff: {
        name: "",
        phone: "",
        area: "",
        updateTime: "",
        account: "",
        password: "",
        img: "",
        role: {
          id: "",
        }
      },
    }
  },
  methods: {
    filterTag(value, row) {
      return row.status === value;
    },
    initAdd() {
      this.dialogAddFormVisible = true;
      this.getRoles();
      this.getAreas();

    },
    // importFile() {
    //   let p = new FormData()
    // this.formData=p.append('file', this.fileList.raw, 'file')

    // },
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      this.propertyStaff = row
      console.log(row)
    },
    handleDelete(index, row) {
      this.$axios.post("http://127.0.0.1:8080/api/v1/config/propertyStaff/delete/" + row.id).then(r => {
        this.getPropertyStaffs();
      })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      console.log(file);
      console.log(fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    beforeUpload(file){
      console.log(file);
    },
    onProgress(event, file, fileList){
     this.uploadFile=file;
     console.log(this.uploadFile);
    },
    handleChange(value) {
      this.areas.id = value[value.length - 1];
      const checkedNodes = this.$refs['dropDownVisible'].getCheckedNodes() // 获取当前点击的节点
      areaId = checkedNodes.value;
      this.propertyStaff.area = areaId;
      console.log(checkedNodes);
      console.log(value);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      this.fileList = fileList;
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    submit() {
      let params = new FormData();
     params.append("file",this.uploadFile);
      this.$axios({
        method: 'post',
        url: 'http://127.0.0.1:8080/api/v1/config/propertyStaff/upload/propertyStaffPhoto',
        data: params,
      }).then(res => {
        console.log(res)
      })
        .catch(err => {
          console.log(err)
        })
    },
    deleted(index, row) {
      if (row.status == "y") {
        this.$message({
          showClose: true,
          message: '本条数据是启用状态，禁止删除',
          type: 'error'
        });
      } else {
        this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.handleDelete(index, row);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },
    getPropertyStaffs() {
      let propertyStaffVo = {
        propertyStaff: this.propertyStaff,
        page:this.page,
        pageSize:this.pageSize,
      }
      this.$axios.post("http://127.0.0.1:8080/api/v1/config/propertyStaff/list",propertyStaffVo).then(r => {
        let q = JSON.parse(JSON.stringify(r));
        // 解决[__ob__: Observer]问题
        console.log(q);
        if (q.data.code == 200) {
          console.log(q.data.data);
          this.tableData = q.data.data;
          this.loading = false;
        }
      })
    },
    add() {
      let propertyStaffVo = {
        propertyStaff: this.propertyStaff,
        palceIds: [14, 15]
      }
      this.$axios.post("http://127.0.0.1:8080/api/v1/config/propertyStaff/add", propertyStaffVo).then(r => {
        if (r.data.code == 200) {
          this.$refs.upload.submit();
          // this.submit();
          this.dialogAddFormVisible = false;
          this.$message({
            message: '增加成功',
            type: 'success'
          });
        }
      })
    },
    updatedConfig() {
      let propertyStaffVo = {
        propertyStaff: this.propertyStaff,
        palceIds: [14, 15]
      }
      this.$axios.post("http://127.0.0.1:8080/api/v1/config/propertyStaff/update", propertyStaffVo).then(r => {
        if (r.data.code == 200) {
          this.$refs.upload.submit();
          this.dialogFormVisible = false;
          this.$message({
            message: '修改成功',
            type: 'success'
          });
        }
      })
    },
    getRoles() {
      this.$axios.post("http://127.0.0.1:8080/api/v1/wy/list").then(r => {
        console.log(r);
        if (r.data.code == 200) {
          this.roles = r.data.data;
        }
      })
    },
    getAreas() {
      this.$axios.post("http://127.0.0.1:8080/api/v1/bx/place/list").then(r => {
        console.log(r);
        // console.log(JSON.parse(JSON.stringify(r)));
        // let q = JSON.parse(JSON.stringify(r));
        if (r.data.code == 200) {
          let placeList = JSON.parse(JSON.stringify(r.data.data));
          let data = [];
        for (let p of placeList) {
          if (p.parentId == 0) {
            data.push(p);
          }
        }
        this.areas=data;
        console.log( this.areas);
          // console.log(JSON.parse(JSON.stringify(q.data.data)));
        }
      })
    },
    getPhoto() {
      //用于后续业主取头像
      this.$axios.get("http://127.0.0.1:8080/api/v1/config/propertyStaff/getPhoto", { responseType: "blob" }).then(res => {
        console.log(res);
        let blob = new window.Blob([res.data]);
        let url = window.URL.createObjectURL(blob);
        this.imgSrc = url;
        console.log(blob)
        console.log(url)
      });
    }
  },
  created() {
    this.getPropertyStaffs();
    this.getPhoto();
  }
}
</script>